<template>
    <!-- 修改资料 -->
  
    <div>
      <el-form label-width="85px" :model="form" label-position="right" ref="formRef" :rules="formRules">
        <el-form-item label="编号" prop="number">
          <el-input v-model="form.number"></el-input>
        </el-form-item>
        <el-form-item label="地区名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="上级地区" prop="parentId">
          <el-tree-select v-model="form.parentId" :data="parentData" :render-after-expand="false" check-strictly="true" />
        </el-form-item>
        <el-form-item label="级别" prop="areaLevel">
          <el-select v-model="form.areaLevel" clearable placeholder="请选择：">
            <el-option v-for="item in configData.areaLevelList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="省市区">
            <el-row :gutter="15">
              <el-col :span="8">
                <el-input v-model="form.province"  class="borderNone"></el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="form.city" class="borderNone"></el-input>
              </el-col>
              <el-col :span="8">
                <el-input v-model="form.district"  class="borderNone"></el-input>
              </el-col>
          </el-row>
          </el-form-item>
        </el-col>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="form.status" size="large" inline-prompt :active-icon="Check" :inactive-icon="Close"
            active-value="normal" inactive-value="disable" />
        </el-form-item>
      </el-form>
      <div class="button-position">
        <el-button @click="updateVisible" style="margin-left: 228px">取 消</el-button>
        <el-button type="primary" @click="updateArea(formRef)">确 定</el-button>
      </div>
    </div>
  </template>
    
  <script setup>
  import { reactive, ref, watch, onMounted } from "vue";
  import { ElNotification } from "element-plus";
  import { Check, Close } from '@element-plus/icons-vue';
  import Api from '@/api/model/crm'
  const emit = defineEmits(['updatetable'])
  onMounted(() => {
    getParent();
  });
  
  const props = defineProps({
    paramsData: {
      type: Object,
      defalut: {},
    },
  });
  
  // 添加用户数据的对象
  const form = ref({
  });
  const configData = ref({})
  const formRef = ref();
  const formRules = reactive({
    number: [{ required: true, message: "请输入编号", trigger: "blur" }],
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  });
  
  const updateVisible = (val) => {
    emit('updatetable')
  };
  
  const parentData = ref([]);
  const getParent = async () => {
    let params = {
      fileName: "AreaTreeReport",
    };
    let treeRes = await Api.area.areTree.post(params);
    let res = await Api.area.detail.post(props.paramsData)
    form.value = res.data
    configData.value =res.configData
    parentData.value = treeRes.reportData;
  };
  
  const restAddFormData = () => {
    formRef.value.resetFields();
  };
  
  // 上传
  const updateArea = async (formRef) => {
    await formRef.validate((valid, fields) => {
      if (valid) {
        updateAreaData();
      }
    });
  };
  
  const updateAreaData = async () => {
    // console.log(form.name);
    var params = {
      bean: form.value,
    };
    var res = await Api.area.update.post(params);
    if (res.code == 200) {
      restAddFormData();
      ElNotification.success({
        title: "",
        message: "修改成功！",
        duration: 2000,
      });
      emit("updatetable", true);
    }
  };
  </script>
    
    <style scoped lang="less">
    .borderNone {
      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
          inset;
        cursor: default;
        background-color: transparent;
        border-bottom: 1px solid #999;
        border-radius: 0;
    
        .el-input__inner {
          cursor: default !important;
        }
      }
    }
    </style>
    
    